import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { 
    Wrapper,
    QuickEntraceWrapper,
    RecommendCourseWrapper,
    RecommendVideoWrapper
} from './style'
import CourseItem from '@/components/CourseItem'
import VideoItem from '@/components/VideoItem'
import { Swiper,Tabs } from 'antd-mobile'
import { px2rem } from '@/assets/global-style'
import { connect } from 'react-redux'
import { rootState } from '@/store'
import { Dispatch } from 'redux'
import { changeRecommendVideoIsFavorites, getHomeRecommendAction,} from '@/store/actionCreator'


interface recommendProps {
    loading:boolean,
    recommendEntrance: any[],
    recommendCourse: any[],
    seletorContentTabs: any[],
    recommendVideos: any[]
    getHomeRecommendActionDispatch: () => void,
    changeRecommendVideoIsFavoritesDispatch:(index:number)=>void
}

const Recommend: React.FC<recommendProps> = (props) => {
    const navigate=useNavigate()
    const {
        loading,
        recommendEntrance,
        recommendCourse,
        recommendVideos,
        seletorContentTabs 
    }=props
    const { getHomeRecommendActionDispatch ,changeRecommendVideoIsFavoritesDispatch} = props

    const searchItems = ['8.8全民运动节', '晚8点约会帕梅拉', '城市漫游剧情跑']

    useEffect(() => {
        if(!loading){
            getHomeRecommendActionDispatch()
        }
    }, [])
    return (
        <Wrapper>
            <div className="search_wrapper" 
                onClick={()=>navigate("/search")}
            >
                <div className="search_bar">
                    <div className="icon_search">
                        <i className="iconfont icon-sousuo"></i>
                    </div>
                    <div className="search_recommend_wrapper">
                        <Swiper
                            direction='vertical'
                            indicator={() => null}
                            autoplay
                            loop
                            style={{ '--height': px2rem(40), 'lineHeight': px2rem(40) }}
                        >
                            {searchItems.map((item, index) => {
                                return (
                                    < Swiper.Item key={index}>
                                        {item}
                                    </Swiper.Item>
                                )
                            })}
                        </Swiper>
                    </div>
                </div>
            </div>
            <QuickEntraceWrapper>
                {recommendEntrance.slice(0,8).map((item,index)=>{
                    return(
                        <div className="entrance_item_wrapper" key={index}>
                            <div className="entrance_item_icon">
                                <img className='img_icon' src={item.iconInner} alt="" />
                            </div>
                            <div className="entrance_item_title">{item.title}</div>
                        </div>
                    )
                })}
            </QuickEntraceWrapper>
            <RecommendCourseWrapper>
                <div className="wrapper_title">
                    <div className="title">为你推荐</div>
                    <div className="button_more">查看更多</div>
                </div>
                <div className="course_list_wrapper">
                    {recommendCourse.map((item,index)=>{
                        return(
                            <CourseItem key={index} courseData={item}/>
                        )
                    })}
                </div>
            </RecommendCourseWrapper>
            <RecommendVideoWrapper>
                <div className="wrapper_title">
                    <div className="title">发现课程</div>
                </div>
                <div className="video_tabs_wrapper">
                    <Tabs activeLineMode='fixed'
                        style={{'--fixed-active-line-width':'0',
                                '--active-title-color':'#1fa774'
                                }}
                    >
                        {seletorContentTabs.map((item,index)=>{
                            // console.log(item);
                            return(
                                <Tabs.Tab title={item.name} key={index}/>
                            )
                        })}
                    </Tabs>
                </div>
                <div className="video_list_wrapper">
                    {recommendVideos.map((item,index)=>{
                        return (
                            <VideoItem key={index} videoData={item.videoProcessingCard}
                            videoIndex={item.index}
                            changeRecommendVideoIsFavoritesDispatch={changeRecommendVideoIsFavoritesDispatch}
                            />
                        )
                    })}
                </div>
            </RecommendVideoWrapper>

        </Wrapper>
    )
}
const mapStateToProps = (state: rootState) => ({
    loading:state.recommendData.loading,
    recommendEntrance: state.recommendData.recommendEntrance,
    recommendCourse: state.recommendData.recommendCourse,
    seletorContentTabs: state.recommendData.seletorContentTabs,
    recommendVideos: state.recommendData.recommendVideos
})
const mapDispatchToProps = (dispatch: any) => ({
    getHomeRecommendActionDispatch() {
        dispatch(getHomeRecommendAction())
    },
    changeRecommendVideoIsFavoritesDispatch(index:number){
        dispatch(changeRecommendVideoIsFavorites(index))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Recommend))
